<template>
  <div class="jsextral">
    <h1>面试题:如何理解 JS 的异步?</h1>
    

<P>JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。而渲染主线程承担着诸多的工作，
    渲染页面、执行 JS 都在其中运行。如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务
    无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。</P>
<P>所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，
    主线程将任务交给其他线程去处理，自身立即结束这些任务的执行，转而执行后续代码。当其他线程完成时，
    将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。</P>
  
  <h1>阐述一下 JS 的事件循环</h1>
<P>事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列未尾可。过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。</P>
<P>根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行</P>
  <h1>前端如何解决页面请求接大规模并发问题</h1>
<P>可以使用请求合并、节流防抖、缓存策略、懒加载等方式控制并发数量。</P>
<P>1. 请求合并</P>
<P>适用场景：需要频繁调用多个接口获取数据时(如商品列表、用户信息、订单状态等)。</P>
<P>批量请求接口：后端提供批量查询接口，前端Promise.all将多个请求合并为一个</P>
<P>2、请求节流(Throttle)与防抖(Debounce)</P>
<P>适用场景：搜索框输入、滚动加载、窗口大小调整等。</P>
<P>节流(Throttle)：确保函数在一定时间间隔内最多执行一次。</P>
<P>防抖(Debounce)：确保函数在事件停止触发后延迟执行。</P>
<P>3. 缓存策略</P>
<P>目标：减少重复请求，提升响应速度。</P>
<P>适用场景：静态资源、频繁访问的 API 数据。</P>
<P>4. 懒加载(Lazy Loading)</P>
<P>目标：延迟加载非核心资源，先加载关键内容，提高首屏性能。</P>
<P>适用场景：图片、视频、组件、代码分割。</P>


<h1>使用第三方库 async-pool</h1>
<P>async-pool 是一个专门用于管理并发任务的 JavaScript 库，它提供了更简洁和灵活的方式来控制并发数量、处理任务队列和错误处理。使用 async-pool 可以简化代码逻辑，提高开发效率。</P>
<P>步骤讲解</P>
<P>安装 async-pool 库：npm install async-pool</P>
<P>创建一个 Pool 实例，设置最大并发数。</P>
<P>使用 pool.run 方法，将每个下载任务添加到池中执行。</P>
<P>async-pool 会自动控制并发数量，并在任务完成后调用回调函数。</P>

<P>后台线程(在 Web Workers 语境中)是指由浏览器创建并管理的、独立于主线程运行的 JavaScript 执行环境。</P>
<h1>什么是Web Worker?</h1>
<P>Web Workers 是浏览器提供的 Js 多线程解决方案，Web Workers允许在后台线程中运行js脚本，解决传统单线程 Js的阻塞问题。 Worker 线程，我们能够执行 CPU 密集型任务(如大数据处理或复杂计算)而不会阻塞页面渲染和用户交互。</P>
<P>Worker 线程使用 postMessage 和 onmessage 进行线程间通信。但 Worker 环境受到严格限制：它无法访问 DOM、window 或 document 对象，只能使用有限的 API(如 fetch 或 WebSockets)。这种隔离设计避免了线程冲突，但也意味着所有数据处理必须通过结构化克隆或 Transferable Objects 进行传递。</P>
  </div>
</template>

<script lang="ts" setup>

</script>

<style lang="less" scoped>
.jsextral {
   display: flex;
    flex-flow: column nowrap;
    justify-items: center;
    text-align: center;
    padding: 10px 200px;
    p{
        font-size: 18px;
        text-align: justify;
    }
}
</style>
